<!--
 * @Author: 毕晨曦 
 * @Date: 2024-07-29 23:42:32
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-08-01 22:43:05
 * @FilePath: /xing-fu-da-zi-weapp/src/components/messageItem/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div v-if="ai">
    <view class="message-item">
      <view class="avatar">
        <text class="avatar-text">AI教练</text>
      </view>
      <view class="message-content">
        <text class="message-text">{{ text }}</text>
      </view>
    </view>
  </div>

  <div v-else>
    <view class="message-item">
      <view class="message-content-right">
        <text class="message-text">{{ text }}</text>
      </view>
      <view class="avatar">
        <image
          :src="
            userInfo
              ? `https://hunlianjiaxiao.cn/img/love/${userInfo.avatar}`
              : ''
          "
          class="avatar-image"
        />
        <text class="avatar-text">{{ userInfo && userInfo.nickName }}</text>
      </view>
    </view>
  </div>
</template>

<script setup>
const props = defineProps({
  text: String,
  ai: Boolean,
});

const userInfo = uni.getStorageSync("userInfo");

import { userChat } from "@/store/chat";
import { computed } from "vue";
console.log("props", props);
const chatStore = userChat();
</script>

<style>
.message-item {
  display: flex;
  align-items: flex-start;
  padding: 10px;
}

.avatar {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #ccc;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-text {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20rpx;
  color: #fff;
  background-color: #000;
  padding: 2px 4px;
  border-radius: 4px;
  width: 80rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-content {
  flex: 1;
  background: #81d8d0;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-left: 20rpx;
  max-width: 70%;
}

.message-content-right {
  flex: 1;
  background: #81d8d0;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
  max-width: 70%;
}

.message-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.message-text {
  color: #666;
}

.message-time {
  font-size: 12px;
  color: #999;
  text-align: right;
  padding-right: 60rpx;
  padding-bottom: 26rpx;
}
</style>
